<script setup lang="ts">
import HomeCategory from "@/views/Home/components/HomeCategory.vue";
import HomeBanner from "@/views/Home/components/HomeBanner.vue";
import HomeNew from "@/views/Home/components/HomeNew.vue";
import HomeProduct from "@/views/Home/components/HomeProduct.vue";
import HomeHot from "@/views/Home/components/HomeHot.vue";

import {useMouseInElement} from "@vueuse/core";
import {ref, watch} from "vue";
import {useBanner} from "@/stores/useBanner.js";
import {reactive} from "vue";

const target = ref(null)
const targetBanner = ref(null)
const userBanner = useBanner()
const mouse = reactive(useMouseInElement(target))
const mouseBanner = reactive(useMouseInElement(targetBanner))

watch([mouse, mouseBanner], () => {
  userBanner.bannerState = mouse.isOutside;
});

</script>

<template>
  <div class="home">
    <div ref="target" class="home-category">
      <HomeCategory></HomeCategory>
    </div>
    <HomeBanner ref="mouseBanner"/>
  </div>
  <HomeNew/>
  <HomeHot/>
  <HomeProduct/>
</template>

<style scoped lang="scss">

.home {
  position: relative;
}

</style>
